<template>
	<view class="procedure">
		<view :class="{'Active':procedure >= 3 }">
			<view class="Liine">
				<view class="omine">1</view>
				<text class="LiineTxt">详细资料</text>
			</view>
		</view>

		<view class="proList" :class="{'Active':procedure >= 4}">
			<view class="henine">
				<text class="heninw">......</text>
			</view>
			<view class="Liine">
				<view class="omine">2</view>
				<text class="LiineTxt">择偶要求</text>
			</view>

		</view>
		<view class="proList" :class="{'Active':procedure == 5}">
			<view class="henine">
				<text class="heninw">......</text>
			</view>
			<view class="Liine">
				<view class="omine">3</view>
				<text class="LiineTxt">实名认证</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { defineProps } from 'vue';
	defineProps(['procedure'])
</script>

<style lang="scss" scoped>
	.procedure {
		width: 690rpx;
		height: 200rpx;
		padding: 0 30rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.proList {
		flex: 1;
		display: flex;
		align-items: center;
		position: relative;
		overflow: hidden;
	}

	.Liine {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.omine {
		width: 46rpx;
		height: 46rpx;
		border-radius: 50%;
		background-color: #e5e5e5;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #ffffff;
		font-size: 30rpx;
	}

	.LiineTxt {
		color: #999;
		font-size: 26rpx;
		margin-top: 14rpx;
	}

	.henine {
		flex: 1;
		height: 80rpx;
		color: #999;
		position: relative;
	}

	.heninw {
		font-size: 50rpx;
		color: #e5e5e5;
		position: absolute;
		top: -30rpx;
		left: 50%;
		transform: translate(-50%, 0);
	}

	.Active .omine {
		background-color: $themeColor;
	}

	.Active .LiineTxt {
		color: $themeColor;
	}

	.Active .heninw {
		color: $themeColor;
	}
</style>